<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const box = 20;
        const rows = canvas.height / box;
        const cols = canvas.width / box;

        let snake = [{ x: 9 * box, y: 9 * box }];
        let direction = 'RIGHT';
        let food = spawnFood();

        document.addEventListener('keydown', changeDirection);

        function changeDirection(event) {
            if (event.key === 'ArrowUp' && direction !== 'DOWN') direction = 'UP';
            if (event.key === 'ArrowDown' && direction !== 'UP') direction = 'DOWN';
            if (event.key === 'ArrowLeft' && direction !== 'RIGHT') direction = 'LEFT';
            if (event.key === 'ArrowRight' && direction !== 'LEFT') direction = 'RIGHT';
        }

        function spawnFood() {
            return {
                x: Math.floor(Math.random() * cols) * box,
                y: Math.floor(Math.random() * rows) * box
            };
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < snake.length; i++) {
                ctx.fillStyle = (i === 0) ? 'green' : 'lightgreen';
                ctx.fillRect(snake[i].x, snake[i].y, box, box);
                ctx.strokeStyle = 'darkgreen';
                ctx.strokeRect(snake[i].x, snake[i].y, box, box);
            }

            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, box, box);

            let snakeX = snake[0].x;
            let snakeY = snake[0].y;

            if (direction === 'UP') snakeY -= box;
            if (direction === 'DOWN') snakeY += box;
            if (direction === 'LEFT') snakeX -= box;
            if (direction === 'RIGHT') snakeX += box;

            if (snakeX === food.x && snakeY === food.y) {
                food = spawnFood();
            } else {
                snake.pop();
            }

            const newHead = { x: snakeX, y: snakeY };

            if (collide(newHead)) {
                clearInterval(game);
                alert('游戏结束');
            }

            snake.unshift(newHead);
        }

        function collide(head) {
            // 检查蛇是否碰到边界或自身
            if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) return true;
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) return true;
            }
            return false;
        }

        const game = setInterval(draw, 100);
    </script>
</body>
</html>
